const HtmlWebPackPlugin=require('html-webpack-plugin'); 
const MiniCssExtractPlugin=require('mini-css-extract-plugin');
module.exports = {
    module:{
        rules:[
            {
                test: /\.(js|jsx)$/, 
                exclude:/node_modules/,
                use:{
                    loader: "babel-loader"
                }
            },
            {
                test: /\.html$/,
                use: [
                  {
                    loader: "html-loader",
                    options: { minimize: true }
                  }
                ]
            },
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader"]
            },
            {
                test: /\.scss$/,
                use: [
                    "style-loader", // creates style nodes from JS strings
                    "css-loader", // translates CSS into CommonJS
                    "sass-loader" // compiles Sass to CSS, using Node Sass by default
                ]
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                use:{
                    loader:'url-loader',
                    options:{
                        limit: '8192',
                        outputPath:'image/',
                        loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
                    }
                }
                
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
          template: "./src/index.html",
          filename: "./index.html"
        }),
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        })
    ],
    /* 代码分割 */
}